<template>
	<view class="publish">
		<!-- <view class="flex1 wrap"> -->
		<scroll-view scroll-y="true" style="height: 100%" :enable-back-to-top="true" enhanced :scroll-into-view="scrollVal">
			<view class="wrap sc-v">
				<!-- 发布 -->
				<view class="top mb20" id="a-0">
					<view class="mb20 font30">我是</view>
					<view class="box">
						<view :class="num == 0 ? 'active borderb pb' : 'borderb pb'" @click="checkBtn('num', 0)">
							我是
							<text class="line">业主</text>
							，出租自己的房子
						</view>
						<view :class="num == 1 ? 'active borderb pb' : 'borderb pb'" @click="checkBtn('num', 1)">
							我是
							<text class="line">室友</text>
							，找人和我一起合租
						</view>
						<view :class="num == 2 ? 'active  pb' : ' pb'" @click="checkBtn('num', 2)">
							我要搬走，
							<text class="line">转租</text>
							现在的房子
						</view>
					</view>
				</view>
				<view class="photo mb20" id="a-1">
					<view class="mb20 font30">实拍照(最多上传九张图片)</view>
					<view class="mb20">
						<uni-file-picker
							ref="files"
							:auto-upload="false"
							@select="imgSelect"
							@delete="imgDel"
							v-model="imageValue"
							file-mediatype="image"
							mode="grid"
							file-extname="png,jpg"
							:limit="9"
						/>
					</view>
					<view class="tip">
						<view class="">
							<text class="iconfont icon-duigou f"></text>
							真实明亮的照片对加速出租非常重要
						</view>
						<view class="">
							<text class="iconfont icon-duigou f"></text>
							请使用清晰、无水印、入住后的近期实拍照片
						</view>
						<view class="">
							<text class="iconfont icon-duigou f"></text>
							包含卧室、厅、厨房、卫生间等区域
						</view>
						<view class="">
							<text class="iconfont icon-chahao c"></text>
							请不要使用截屏图片，视频/VR/其他APP等
						</view>
					</view>
				</view>
				<view class="rent-out mb20" id="a-2">
					<view class="mb20 font30">出租类型</view>
					<view class="box">
						<view :class="num1 == 0 ? 'active borderb pb' : 'borderb pb'" @click="checkBtn('num1', 0)">
							<text class="line">整租</text>
							出租整套房子
						</view>
						<view :class="num1 == 1 ? 'active borderb pb' : 'borderb pb'" @click="checkBtn('num1', 1)">
							<text class="line">合租</text>
							出租一个卧室
						</view>
						<view :class="num1 == 2 ? 'active  pb' : ' pb'" @click="checkBtn('num1', 2)">
							<text class="line">床位</text>
							多人共享一个卧室
						</view>
					</view>
				</view>
				<view class="location mb20" id="a-3">
					<view class="mb20 font30">小区名称或地址</view>
					<view class="box box1" @click="locationBtn">
						<view class="iconfont icon-position mr20 c"></view>
						<template v-if="Object.keys(address).length > 0">
							<view class="">
								<view class="active font30">{{ address.name }}</view>
								<view class="tip">{{ address.address }}</view>
							</view>
						</template>
						<template v-else>
							<view class="active font30">请选择地址</view>
						</template>
					</view>
				</view>

				<view class="mb20" id="a-4">
					<view class="mb20 font30">整套房子的房间</view>
					<view class="box box2">
						<template v-for="(item, index) in rooms" :key="'rooms' + index">
							<view v-if="index !== 3" :class="num2 == index ? 'active' : ''" @click="checkBtn('num2', index)">{{ item }}</view>
							<template v-if="index === 3">
								<picker mode="selector" :range="arr" @change="moreBtn($event, index, 'num2')">
									<view :class="num2 == index ? 'active' : ''">{{ rIndex == -1 ? '更多' : rv + '室' }}</view>
								</picker>
							</template>
						</template>
					</view>
				</view>

				<view class="mb20" id="a-5">
					<view class="mb20 font30">客厅</view>
					<view class="box box2">
						<template v-for="(item, index) in halls" :key="'halls' + index">
							<view v-if="index !== 4" :class="num3 == index ? 'active' : ''" @click="checkBtn('num3', index)">{{ item }}</view>
							<template v-if="index === 4">
								<picker mode="selector" :range="arr" @change="moreBtn($event, index, 'num3')">
									<view :class="num3 == index ? 'active' : ''">{{ rIndex1 == -1 ? '更多' : rv1 + '厅' }}</view>
								</picker>
							</template>
						</template>
					</view>
				</view>

				<view class="mb20" id="a-6">
					<view class="mb20 font30">卫生间</view>
					<view class="box box2">
						<template v-for="(item, index) in restRoom" :key="'restRoom' + index">
							<view :class="num4 == index ? 'active' : ''" @click="checkBtn('num4', index)">{{ item }}</view>
						</template>
					</view>
				</view>

				<view class="mb20" id="a-7">
					<view class="mb20 font30">房间类型</view>
					<view class="box box2">
						<template v-for="(item, index) in roomType" :key="'roomType' + index">
							<view :class="num5 == index ? 'active' : ''" @click="checkBtn('num5', index)">{{ item }}</view>
						</template>
					</view>
				</view>

				<view class="mb20" id="a-8">
					<view class="mb20 font30">朝向</view>
					<view class="box box2">
						<template v-for="(item, index) in orientation" :key="'orientation' + index">
							<view :class="num6 == index ? 'active' : ''" @click="checkBtn('num6', index)">{{ item }}</view>
						</template>
					</view>
				</view>

				<view class="mb20" id="a-9">
					<view class="mb20 font30">设施</view>
					<view class="box box2">
						<template v-for="(item, index) in facility" :key="'facility' + index">
							<view :class="num7 == index ? 'active' : ''" @click="checkBtn('num7', index)">{{ item }}</view>
						</template>
					</view>
				</view>

				<view class="mb20" id="a-10">
					<view class="mb20 font30">性别</view>
					<view class="box box2">
						<template v-for="(item, index) in sex" :key="'sex' + index">
							<view :class="num8 == index ? 'active' : ''" @click="checkBtn('num8', index)">{{ item }}</view>
						</template>
					</view>
				</view>

				<view class="mb20" id="a-11">
					<view class="mb20 font30">整套房子的总面积</view>
					<view class="box1 borderb1">
						<input type="text" placeholder="请输入总面积" class="flex1 tc" v-model="houseVal" />
						<view class="">平米</view>
					</view>
				</view>
				<view class="mb20" v-if="num1 != 0" id="a-12">
					<view class="mb20 font30">待租卧室的面积</view>
					<view class="box1 borderb1">
						<input type="text" placeholder="请输入出租房间面积" class="flex1 tc" v-model="roomVal" />
						<view class="">平米</view>
					</view>
				</view>
				<view class="mb20" id="a-13">
					<view class="mb20 font30">楼层</view>
					<view class="box1">
						<input type="text" placeholder="第几层" class="flex1 tc borderb1" v-model="foolVal" />
						/
						<input type="text" placeholder="总楼层" class="flex1 tc borderb1" v-model="foolsVal" />
					</view>
				</view>

				<view class="mb20" id="a-14">
					<view class="mb20 font30">新租客和谁签订合同</view>
					<view class="box">
						<template v-for="(item, index) in contract" :key="'contract' + index">
							<view :class="num9 == index ? 'active borderb pb' : 'borderb pb'" @click="checkBtn('num9', index)">
								{{ item }}
							</view>
						</template>
					</view>
				</view>

				<view class="mb20" id="a-15">
					<view class="mb20 font30">我的旧合同和谁签订</view>
					<view class="box box2">
						<template v-for="(item, index) in mycontract" :key="'mycontract' + index">
							<view :class="num10 == index ? 'active' : ''" @click="checkBtn('num10', index)">{{ item }}</view>
						</template>
					</view>
				</view>

				<view class="mb20" id="a-16">
					<view class="mb20 font30">我的旧合同到期</view>
					<view class="box ptb">
						<uni-datetime-picker type="date" v-model="single" :border="false" />
					</view>
				</view>

				<view class="mb20" id="a-17">
					<view class="mb20 font30">我已查验过房子的产权证明</view>
					<view class="box box2">
						<template v-for="(item, index) in certificate" :key="'certificate' + index">
							<view :class="num11 == index ? 'active' : ''" @click="checkBtn('num11', index)">{{ item }}</view>
						</template>
					</view>
				</view>

				<view class="mb20" id="a-18">
					<view class="mb20 font30">是否有转租费用或中介费</view>
					<view class="box box2">
						<template v-for="(item, index) in agencyFee" :key="'agencyFee' + index">
							<view :class="num12 == index ? 'active' : ''" @click="checkBtn('num12', index)">{{ item }}</view>
						</template>
					</view>
				</view>

				<view class="mb20" id="a-19">
					<view class="mb20 font30">可入住时间</view>
					<view class="box box2">
						<template v-for="(item, index) in checkTime" :key="'checkTime' + index">
							<view v-if="index != 2" :class="num13 == index ? 'active' : ''" @click="checkBtn('num13', index)">{{ item }}</view>
							<template v-if="index === 2">
								<picker mode="date" v-model="dateVal" @change="moreBtn($event, index, 'num13')">
									<view :class="num13 == index ? 'active' : ''">{{ !dateVal ? '选择日期' : dateVal }}</view>
								</picker>
							</template>
						</template>
					</view>
				</view>

				<view class="mb20" id="a-20">
					<view class="mb20 font30">详情介绍</view>
					<view class="tip mb20">转租原因，有无转租手续费，房子的优缺点，交通及周边的环境</view>
					<view class="border">
						<textarea v-model="detailVal" placeholder="请详细介绍房子的情况" maxlength="-1" />
					</view>
				</view>

				<view class="mb20"  id="a-21">
					<view class="mb20 font30">室友情况</view>
					<view class="tip mb20">介绍其他卧室室友的情况：性别、数量等</view>
					<view class="border">
						<textarea v-model="detailVal1" placeholder="请补充室友情况" maxlength="-1" />
					</view>
				</view>

				<view class="mb20"  id="a-22">
					<view class="mb20 font30">其他</view>
					<view class="other">
						<template v-for="(item, index) in other" :key="'other' + index">
							<view :class="item.check ? 'active' : ''" @click="otherBtn(index)">{{ item.title }}</view>
						</template>
					</view>
				</view>
				<view class="mb20" id="a-23">
					<view class="mb20 font30">月租金</view>
					<view class="box1 borderb1">
						<input type="text" placeholder="请输入月租金" class="flex1 tc" v-model="price" />
						<view class="">元/月</view>
					</view>
				</view>

				<view class="mb20" id="a-24">
					<view class="mb20 font30">租金支付时间</view>
					<view class="box box2">
						<template v-for="(item, index) in payTime" :key="'payTime' + index">
							<view :class="num15 == index ? 'active' : ''" @click="checkBtn('num15', index)">{{ item }}</view>
						</template>
					</view>
				</view>

				<view class="mb20" id="a-25">
					<view class="mb20 font30">微信头像</view>
					<view class="box1 poa">
						<!-- #ifdef MP-WEIXIN -->
						<template v-if="!avater" >
							<text class="iconfont icon-touxiang avatar"></text>
							<button open-type="chooseAvatar" class="btn" @chooseavatar="chooseavaterBtn"></button>
						</template>
						<!-- #endif -->
						<!-- #ifndef MP-WEIXIN -->
						<text v-if="!avater" class="iconfont icon-touxiang avatar" @click="chooseBtn"></text>
						<!-- #endif -->
						<image v-if="avater" :src="avater" mode="aspectFill" class="avatar-img"></image>
					</view>
				</view>

				<view class="mb20" id="a-26">
					<view class="mb20 font30">微信昵称</view>
					<view class="box1 borderb1">
						<!-- #ifndef MP-WEIXIN -->
						<input type="text" placeholder="请输入微信昵称" class="flex1" v-model="nickname" />
						<!-- #endif -->
						<!-- #ifdef MP-WEIXIN -->
						<input type="nickname" placeholder="请输入微信昵称" class="flex1" v-model="nickname" />
						<!-- #endif -->
					</view>
				</view>

				<view class="mb20" id="a-27">
					<view class="mb20 font30">电话</view>
					<view class="box1 borderb1">
						<input type="number" placeholder="请输入联系电话" class="flex1" v-model="tel" />
					</view>
				</view>

				<view class="mb20" >
					<view class="mb20 font30">微信</view>
					<view class="box1 borderb1">
						<input type="number" placeholder="选填" class="flex1" v-model="wx" />
					</view>
				</view>

				<view class="mb20">
					<view class="mb20 font30">QQ</view>
					<view class="box1 borderb1">
						<input type="number" placeholder="选填" class="flex1" v-model="qq" />
					</view>
				</view>

				<view class="plish" @click="publishBtn">发布</view>
			</view>
		</scroll-view>
		<!-- </view> -->
		<!-- 点击房间，客厅的更多展示弹框 -->
		<template></template>
	</view>
</template>

<script>
import { reactive, toRefs, ref } from 'vue';
import  requestApi  from '../../utils/api.js'
export default {
	setup() {
		const data = reactive({
			rooms: ['一室', '二室', '三室', '更多'],
			rv: '',
			halls: ['无', '一厅', '二厅', '三厅', '更多'],
			rv1: '',
			restRoom: ['卧室有独卫', '公用卫生间'],
			roomType: ['主卧', '次卧', '隔断'],
			orientation: ['东', '南', '西', '北', '不知道'],
			facility: ['齐全', '缺部分', '空房'],
			sex: ['不限', '限男生', '限女生'],
			other: [
				{ title: '可短租', check: false },
				{ title: 'LOft', check: false },
				{ title: '大开间', check: false },
				{ title: '自建房', check: false },
				{ title: '品牌公寓', check: false },
				{ title: '随时看房', check: false },
				{ title: '可办居住证', check: false }
			],
			payTime: ['每月付', '按季付', '半D年付', '付整年'],
			num: -1,
			num1: -1,
			num2: -1,
			num3: -1,
			num4: -1,
			num5: -1,
			num6: -1,
			num7: -1,
			num8: -1,
			num9: -1,
			num10: -1,
			num11: -1,
			num12: -1,
			num13: -1,
			num14: -1,
			num15: -1,
			contract: ['业主 房子的产权所有人', '职业二房东 承包了多套房子出租', '公寓管家 自如、蛋壳、公寓的工作人员', '我', '室友', '中介', '其他'],
			mycontract: ['业主', '二房东', '室友', '中介', '公寓', '其他'],
			single: '',
			certificate: ['查验过', '没查验'],
			agencyFee: ['有', '没有'],
			checkTime: ['已搬空', '随时可搬走', '选择日期'],
			scrollVal: 'a-10', //当前滚动的id
			imageValue: [],
			photoList: [],
			houseVal: '', //房子面积
			roomVal: '', //卧室面积
			foolVal: '', //楼层
			foolsVal: '', //总楼层
			detailVal: '', //详情介绍
			detailVal1: '', //室友介绍
			price: '', //月租金
			nickname: '', //微信昵称
			tel: '', //电话
			wx: '', //微信号
			qq: '', //qq号
			address: {},
			arr: ['4', '5', '6', '7'],
			rIndex: -1,
			rIndex1: -1,
			rIndex2: -1,
			dateVal: '',
			avater:'',
			isImg:0,
			isImg1:0
		});
		const files = ref(null);
		//如果是微信小程序获取用户头像的方法
		const chooseavaterBtn = (e) => {
			console.log(e);
		};
		// 如果不是小程序，直接打开相册进行替换图片
		const chooseBtn = () => {
			data.isImg1 = 1
			uni.chooseImage({
				count:1,
				success: (res) => {
					console.log(res);
					data.avater = res.tempFilePaths[0]
				},
				fail: (msg) => {
					console.log(msg);
				}
			})

		};

		// 公共的点击事件
		const checkBtn = (name, k) => {
			if (name === 'num2' && k < 3) {
				data.rIndex = -1;
				data.rv = '';
				//客厅点击了更多
			} else if (name === 'num3' && k < 4) {
				data.rIndex1 = -1;
				data.rv1 = '';
				//客厅点击了更多
			} else if (name === 'num13' && k < 2) {
				//入住时间点击选择日期
				data.dateVal = '';
				console.log(data.dateVal, 'data=====');
			}
			data[name] = k;
		};
		// 其他点击事件多选
		const otherBtn = (k) => {
			data.other[k].check = !data.other[k].check;
		};

		const publishBtn = () => {
			const status = vifity();
			if (!status) return;
			let s = 0,s1=0;
			if(data.isImg==1){
				files.value.upload().then((res) => {
					console.log(res);
					if (res.length > 0) {
						res.forEach((item) => {
							data.photoList.push(item.url);
						});
						data.isImg = 0
						s = 0
						submitRequest()
					}else{
						toast('图片上传失败，稍后重试！')
						data.isImg = 0
						data.photoList = []
						data.imageValue = []
						s = 1
					}
					
				});
			}
			if(s==1) return 
			if(data.isImg1==1){
				uniCloud.uploadFile({
					cloudPath:'avater/'+new Date().getTime()+'.jpg',
					filePath:data.avater,
					success:res=>{
						console.log(res);
						data.avater1 = res.fileID 
						data.isImg1 = 0
						s1=0
					},fail:msg=>{
						toast('上传头像失败，稍后重试！')
						console.log(msg);
						data.isImg1 = 0
						data.avater = ''
						s1=1
					}
				})
			}
			if(s1==1) return 
			
			
		};
		//提交数据接口
		const submitRequest=()=>{
			const arr = data.other.filter(item=>item.check)
			const params = {
				type:'publish',
				images:data.photoList,//上传图片
				houseType:data.num,
				renout:data.num1,
				address: data.address,
				room: data.num2,
				roomname: data.rooms[data.num2],
				halls: data.num3,
				hallsname: data.halls[data.num3],
				restRoom: data.num4,
				restRoomname:data.restRoom[data.num4],
				roomType:data.num5,
				roomTypename:data.roomType[data.num5],
				orientation:data.num6,
				orientationname:data.orientation[data.num6],
				facility: data.num7,
				facilityname:data.facility[data.num7],
				sex: data.num8,
				sexname:data.sex[data.num8],
				houseVal: data.houseVal,
				roomVal: data.roomVal,
				foolVal: data.foolVal,
				foolsVal: data.foolsVal,
				contract: data.num9,
				contractname: data.contract[data.num9],
				mycontract: data.num10,
				mycontractname:data.mycontract[data.num10],
				single:data.single,
				certificate: data.num11,
				certificate:data.certificate[data.num11],
				agencyFee: data.num12,
				agencyFeename:data.agencyFee[data.num12],
				checkTime: data.num13,
				checkTimename: data.checkTime[data.num13],
				detailVal:data.detailVal,
				detailVal1: data.detailVal1,
				other:arr,
				price: data.price,
				payTime:data.num15,
				payTimename: data.payTime[data.num15],
				avater:data.avater1,
				nickname:data.nickname,
				tel:data.tel,
				wx:data.wx,
				qq:data.qq
			}
			requestApi('refuge',params).then(res=>{
				console.log(res);
				if(res.result.code===200){
					toast(res.result.message)
					uni.navigateBack()
				}
			})
		}
		// 校验
		const vifity = () => {
			console.log(data.num);
			if (data.num < 0) {
				data.scrollVal = 'a-0';
				toast('请补充内容');
				return false;
			}
			console.log(data.imageValue, 'imageValue');
			if (data.imageValue.length <= 0) {
				toast('请上传图片');
				data.scrollVal = 'a-1';
				return false;
			}
			
			if (data.num1 < 0) {
				data.scrollVal = 'a-2';
				toast('请补充内容');
				return false;
			}
			if (Object.keys(data.address).length <= 0) {
				data.scrollVal = 'a-3';
				toast('请选择地址');
				return false;
			}

			const s = [2, 3, 4, 5, 6, 7, 8].every((item) => {
				console.log(data['num' + item], "data['num'+item]");
				if (data['num' + item] < 0) {
					data.scrollVal = 'a-' + (item + 2);
					toast('请补充内容');
					return false;
				}
				return true;
			});
			console.log('s--------', s);
			if (!s) return;
			
			if(!data.houseVal){
				data.scrollVal = 'a-11'
				toast('请补充内容')
				return false
			}
			if(data.num1 != 0 && !data.roomVal){
				data.scrollVal = 'a-12'
				toast('请补充内容')
				return false
			}
			if(!data.foolVal|| !data.foolsVal){
				data.scrollVal = 'a-13'
				toast('请补充内容')
				return false
			}
			if(!data.single){
				data.scrollVal = 'a-16'
				toast('请补充内容')
				return false
			}
			const s1 = [9,10,11,12,13].every((item) => {
				console.log(data['num' + item], "data['num'+item]");
				if (data['num' + item] < 0) {
					data.scrollVal = 'a-' + (item + (item==9||item==10? 5:6));
					toast('请补充内容');
					return false;
				}
				return true;
			});
			console.log('s1--------', s1);
			if (!s1) return;
			
			if(!data.detailVal){
				data.scrollVal = 'a-20'
				toast('请补充内容')
				return false
			}
			if(!data.detailVal1){
				data.scrollVal = 'a-21'
				toast('请补充内容')
				return false
			}
			const arr = data.other.filter(item=>item.check)
			if(arr.length==0){
				data.scrollVal = 'a-22'
				toast('请补充内容')
				return false
			}
			if(!data.price){
				data.scrollVal = 'a-23'
				toast('请补充内容')
				return false
			}
			if(data.num15<0){
				data.scrollVal = 'a-24'
				toast('请补充内容')
				return false
			}
			if(!data.avater){
				data.scrollVal = 'a-25'
				toast('请补充内容')
				return false
			}
			
			if(!data.nickname){
				data.scrollVal = 'a-26'
				toast('请补充内容')
				return false
			}
			if(!data.tel){
				data.scrollVal = 'a-27'
				toast('请补充内容')
				return false
			}
			if(!/1\d{10}/.test(data.tel)){
				data.scrollVal = 'a-27'
				toast('手机号格式错误')
				return false
			}
			return true;
		};
		// 封装toast
		const toast = (title) => {
			uni.showToast({
				title,
				icon: 'none'
			});
		};
		// 选择图片的事件回调
		const imgSelect = (e) => {
			console.log(e);
			data.isImg=1
			e.tempFiles.forEach((item) => {
				data.imageValue.push(item);
			});
		};
		//删除图片
		const imgDel = (e) => {
			console.log(e);
			const index = data.imageValue.findIndex((item) => {
				return item.cloudPath === e.tempFile.cloudPath;
			});
			index > -1 && data.imageValue.splice(index, 1);
		};
		const locationBtn = () => {
			uni.chooseLocation({
				success: (res) => {
					console.log(res);
					data.address = res;
				},
				fail: (msg) => {
					console.log(msg);
				}
			});
		};
		const moreBtn = (e, k, name) => {
			console.log(e);
			const actions = {
				0: '四',
				1: '五',
				2: '六',
				3: '七'
			};
			if (name === 'num2') {
				data.rIndex = e.detail.value;

				data.rv = actions[e.detail.value];
			} else if (name === 'num13') {
				data.dateVal = e.detail.value;
			} else {
				data.rIndex1 = e.detail.value;

				data.rv1 = actions[e.detail.value];
			}
			data[name] = k;
		};
		return {
			...toRefs(data),
			chooseavaterBtn,
			chooseBtn,
			publishBtn,
			files,
			locationBtn,
			checkBtn,
			otherBtn,
			moreBtn,
			imgSelect,
			imgDel
		};
	}
};
</script>

<style lang="scss">
page {
	height: 100%;
}
.publish {
	width: 100%;
	height: 100%;

	display: flex;
	flex-direction: column;
	font-size: 28upx;
	.wrap {
		overflow: auto;
	}
	.sc-v {
		box-sizing: border-box;
		padding: 20upx 40upx;
	}
	.mb20 {
		margin-bottom: 20upx;
	}
	.pb {
		padding: 30upx 0;
	}
	.border {
		border: 2upx solid #dbdbdb;
		border-radius: 20upx;
	}
	.borderb {
		border-bottom: 2upx solid #fff;
	}
	.borderb1 {
		border-bottom: 2upx solid #dbdbdb;
	}
	.font30 {
		font-size: 32upx;
	}
	.box {
		background-color: #f2f2f2;
		border-radius: 20upx;
		padding: 0 30upx;
	}
	.f,
	.c {
		font-size: 40upx;
		color: #68dca6;
		vertical-align: middle;
	}
	.c {
		color: #ff5e55;
	}
	.active {
		color: #fd4c42;
	}
	.line {
		text-decoration: underline;
		font-size: 32upx;
	}
	.tip {
		color: #a3a3a3;
	}
	.mr20 {
		margin-right: 20upx;
	}
	.box1 {
		@include flex(true);
		padding: 30upx 0;
	}
	.box2 {
		@include flex(true, row, center, space-around);
		padding-top: 30upx;
		padding-bottom: 30upx;
	}
	.ptb {
		padding-top: 20upx;
		padding-bottom: 20upx;
	}
	.tc {
		text-align: center;
	}

	:deep(.uni-date-x) {
		background-color: transparent;
	}
	:deep(uni-textarea) {
		width: 100%;
		box-sizing: border-box;
		padding: 20upx;
	}
	.other {
		@include flex(false);
		flex-wrap: wrap;
		& > view {
			width: 30%;
			margin-right: 20upx;
			margin-bottom: 20upx;
			box-sizing: border-box;
			padding: 20upx 0;
			background-color: #f2f2f2;
			text-align: center;
			border-radius: 20upx;
		}
	}
	.avatar {
		font-size: 180upx;
		color: #ccc;
	}
	.avatar-img{
		display: block;
		margin: 0 auto;
		width: 180upx;
		height: 180upx;
		border-radius: 50%;
		background-color: #ccc;
	}
	.poa {
		position: relative;
		.btn {
			position: absolute;
			top: 0;
			bottom: 0;
			background-color: transparent;
			width: 100%;
		}
		:deep(uni-button:after) {
			border: none;
		}
	}
	.plish {
		width: 300upx;
		height: 100upx;
		border-radius: 40upx;
		background-color: #fd6262;
		color: #fff;
		text-align: center;
		line-height: 100upx;
		font-size: 34upx;
		margin: 40upx auto 20upx;
	}
}

::-webkit-scrollbar {
	display: none;
}
</style>